<template>
  <footer class="tabBar-box">
    <van-tabbar v-model="active" :placeholder="true" :route="true" :fixed="false" :border="false">
      <van-tabbar-item replace v-for="(item, index) in tabbarData" :key="index" :icon="item.icon" :to="item.to">
        {{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
  </footer>
</template>

<script setup>
import { watch,computed,getCurrentInstance,onMounted } from 'vue'
const props = defineProps({
    defaultActive: {
      type: Number,
      default: 0
    }
})
const active = ref(props.defaultActive)


watch(
  () => props.defaultActive,
  (newval, oldval) => {
    active.value = newval
  }
)


const tabbarData = reactive([
  {
    icon: "wap-home",
    title:"首页",
    to: {
			path: '/home/loading'
		}
  },
  {
    icon: "user",
    title:"我的",
    to: {
			path: '/user'
		}
  }
]);
</script>
<style lang="scss" scoped></style>